<template>
  <view class="car">
    <!-- 购物条 -->
    <view class="shop-nav">
      <!-- 1.0 图标 -->
      <view class="car"
            @click="car.show = !car.show">
        <u-icon name="shopping-cart-fill"
                size='100'
                :color='dot===0?"#c8c9cc":"#fcbd71"'></u-icon>
        <!-- 角标 -->
        <view class="dot"
              v-if='dot!=0'>{{dot}}</view>
      </view>
      <!-- 2.0 合计 -->
      <text class="sum">
        另需配送费￥{{send_price}}
      </text>
      <!-- 3.0 按钮 -->
      <u-button ripple
                :type="isStart?'error':'default'"
                :disabled="!isStart"
                shape='circle'>
        {{ isStart
      ? `￥${sum}`
      : `起步价￥${shop.initial_price||0}` }}
      </u-button>
    </view>
    <!-- 购物车哦 -->
    <ShopCar :shopcar='shopcar'
             :car='car'
             @clear-car='handleClear'></ShopCar>
  </view>
</template>

<script>
import ShopCar from './shop-car.vue'
export default {
  components: { ShopCar },
  props: ['shop', 'category'], //店铺信息和菜单
  data() {
    return {
      car: {
        show: false,
        /* 
         显示隐藏购物车列表
         因为子组件的popup是v-model绑定，
         没办法触发动态$emit，
         就用对象引用传值
        */
      },
    }
  },
  computed: {
    // 配送费
    send_price() {
      return this.shop.delivery_method === '平台配送' ? 1.5 : 1
    },
    // 购物车中的商品
    shopcar() {
      const shopcar = []
      this.category.map((menu) =>
        shopcar.push(...menu.goods.filter((good) => good.count !== 0))
      )
      return shopcar
    },
    // 商品数量
    dot() {
      return this.shopcar.length
    },
    // 总价
    sum() {
      return (
        this.shopcar.reduce((total, goods) => {
          return goods.count * parseFloat(goods.goods_price) + parseFloat(total)
        }, 0) + parseFloat(this.send_price)
      ).toFixed(2)
    },
    // 是否达到起送价
    isStart() {
      return this.sum >= this.shop.initial_price
    },
  },
}
</script>

<style lang="scss" scoped>
.car {
  position: relative;
}
.shop-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  width: 100vw;
  height: 120rpx;
  padding: 0 20rpx;
  background-color: #606266;
  box-shadow: 0 -2rpx 10rpx rgba(194, 194, 194, 0.5);
  display: flex;
  align-items: center;
  color: white;
  .car {
    position: relative;
    .dot {
      position: absolute;
      top: 5rpx;
      right: 0;
      background-color: #fa3534;
      width: 30rpx;
      height: 30rpx;
      text-align: center;
      line-height: 30rpx;
      font-size: 25rpx;
      border-radius: 50%;
    }
  }
  .sum {
    height: 70%;
    display: flex;
    align-items: flex-end;
    flex: 1;
    margin: 0 40rpx;
    font-size: 25rpx;
    color: #c0c4cc;
  }
}
</style>